<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<!-- 引入FontAwesome图标库用于下拉箭头 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
    /* 自定义下拉框样式 */
    .custom-select {
        position: relative;
        width: 100%;
    }

    .select-header {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .select-options {
        position: absolute;
        width: 100%;
        max-height: 300px; /* 限制最大高度，超过显示滚动条 */
        border: 1px solid #ddd;
        border-top: none;
        border-radius: 0 0 4px 4px;
        background-color: white;
        overflow-y: auto; /* 启用垂直滚动 */
        z-index: 100;
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .select-options li {
        padding: 8px 12px;
        cursor: pointer;
    }

    .select-options li:hover {
        background-color: #f0f0f0;
    }

    .select-options li.selected {
        background-color: #007bff;
        color: white;
    }

    /* 滚动条样式优化 */
    .select-options::-webkit-scrollbar {
        width: 6px;
    }

    .select-options::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 3px;
    }

    /* 下拉框展开状态 */
    .custom-select.open .select-options {
        display: block;
    }

    .custom-select.open .select-header i {
        transform: rotate(180deg);
    }
</style>
<body class="sb-nav-fixed bg-cover" th:style="'background-image: url(/img/tianjiabeijingtu.jpeg)'">
<nav th:replace="adminCommon::common-navbar"></nav>
<div id="layoutSidenav">
    <div th:replace="adminCommon::common-sidenav"></div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4">添加器材</h1>

                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li>
                    <li class="breadcrumb-item"><a th:href="@{/device/selDevice}">器材管理</a></li>
                    <li class="breadcrumb-item active">添加器材</li>
                </ol>

                <div class="card mb-4 table">

                    <form th:action="@{/device/addDevice}" method="post" name="addForm"
                          onsubmit="return beforeSubmit(this)">
                        <table class="table table-hover">
                            <tr>
                                <td text-align="center">器材名称：</td>
                                <td>
                                    <!-- 自定义带滚动条的下拉框 -->
                                    <div class="custom-select" id="productSelectContainer">
                                        <div class="select-header" onclick="toggleProductDropdown()">
                                            <span id="selectedProduct">请选择产品</span>
                                            <i class="fas fa-chevron-down"></i>
                                        </div>
                                        <ul class="select-options" id="productOptions">
                                            <li th:each="product : ${productList}"
                                                th:data-id="${product.id}"
                                                th:data-name="${product.productName}"
                                                onclick="selectProduct(this)">
                                                [[${product.productName}]]
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- 隐藏字段用于存储产品ID -->
                                    <input type="hidden" id="productId" name="productId" value="">
                                    <!-- 隐藏字段用于存储产品名称 -->
                                    <input type="hidden" id="deviceName" name="deviceName" value="">
                                </td>
                            </tr>

                            <!-- 显示选中产品ID的行 -->
                            <tr id="productIdRow" style="display: none;">
                                <td text-align="center">产品ID：</td>
                                <td>
                                    <input type="text" class="form-control" id="displayProductId" readonly>
                                </td>
                            </tr>

                            <tr>
                                <td text-align="center">器材位置：</td>
                                <td><input type="text" class="form-control" placeholder="x号房间" name="deviceLocation">
                                </td>
                            </tr>
                            <tr>
                                <td text-align="center">器材状态：</td>
                                <td>
                                    <select class="form-control" name="deviceStatus">
                                        <option value="">请选择状态</option>
                                        <option th:each="status : ${T(com.milotnt.enums.DeviceStatusEnum).values()}"
                                                th:value="${status}"
                                                th:text="${status.getDescription()}">
                                        </option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td text-align="center">备注信息：</td>
                                <td><input type="text" class="form-control" placeholder="备注" name="deviceMessage">
                                </td>
                            </tr>
                        </table>
                        <div style="display:flex;justify-content:center;align-items:center;gap:20px;margin:30px 0;">
                            <input type="submit" class="btn btn-outline-success" value="添加">
                            <a th:href="@{/device/selDevice}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> 返回
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </main>
        <footer th:replace="adminCommon::common-footer"></footer>
    </div>
</div>

<div th:include="adminCommon::common-scripts"></div>
<script type="text/javascript">
    // 产品下拉框控制
    function toggleProductDropdown() {
        const container = document.getElementById('productSelectContainer');
        container.classList.toggle('open');
    }

    // 选择产品
    function selectProduct(li) {
        // 更新显示文本
        document.getElementById('selectedProduct').textContent = li.dataset.name;

        // 更新隐藏字段
        document.getElementById('productId').value = li.dataset.id;
        document.getElementById('deviceName').value = li.dataset.name;

        // 显示产品ID行
        document.getElementById('displayProductId').value = li.dataset.id;
        document.getElementById('productIdRow').style.display = '';

        // 高亮选中项并关闭下拉框
        document.querySelectorAll('#productOptions li').forEach(item => {
            item.classList.remove('selected');
        });
        li.classList.add('selected');
        toggleProductDropdown();
    }

    // 点击其他区域关闭下拉框
    document.addEventListener('click', (e) => {
        const container = document.getElementById('productSelectContainer');
        if (!container.contains(e.target)) {
            container.classList.remove('open');
        }
    });

    // 阻止下拉框内部点击事件冒泡
    document.getElementById('productOptions').addEventListener('click', (e) => {
        e.stopPropagation();
    });

    function beforeSubmit(addForm) {
        if (document.getElementById('productId').value == "") {
            alert("请选择产品！")
            return false;
        }
        if (addForm.deviceLocation.value == "") {
            alert("请输入器材位置！")
            return false;
        }
        if (addForm.deviceStatus.value == "") {
            alert("请输入器材状态！")
            return false;
        }
        return true;
    }
</script>
</body>
</html>